import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'

import { resolve } from 'path' //这个path用到了上面安装的@types/node

//引入路由自动配置多级路由
// import Pages from 'vite-plugin-pages'; // API自动引入插件
// import Layouts from 'vite-plugin-vue-layouts';
// 引入插件
import AutoImport from 'unplugin-auto-import/vite'
// 组件自动引入插件
import Components from 'unplugin-vue-components/vite'

// ArcoResolver 组件和指令自动引入解析器
import {
  ArcoResolver,
  VueUseComponentsResolver, //VueUse 组件和指令的自动引入解析器
  VueUseDirectiveResolver
} from 'unplugin-vue-components/resolvers'
//使用 Arco 提供的 Vite 插件进行按需加载和组件库样式配置，
import { vitePluginForArco } from '@arco-plugins/vite-vue'
import Icons from 'unplugin-icons/vite' //icon相关
import IconsResolver from 'unplugin-icons/resolver' //icon相关
// icon 加载 loader
import { FileSystemIconLoader } from 'unplugin-icons/loaders'

// Unocss 插件
import Unocss from 'unocss/vite'
// Unocss 默认预设
import presetUno from '@unocss/preset-uno'
// Unocss 属性模式预设
import presetAttributify from '@unocss/preset-attributify'
// Unocss 指令转换插件
import transformerDirective from '@unocss/transformer-directives'
// https://vitejs.dev/config/
export default ({ mode }) => {
  // console.log('mode', loadEnv(mode, process.cwd()).VITE_BASE_URL); //使用loadEnv在vite.config.ts中读取环境变量
  const baseUrl = loadEnv(mode, process.cwd()).VITE_BASE_URL
  return defineConfig({
    plugins: [
      vue(),
      //默认为文件夹为pages时，不需要配置
      // Pages({
      //   pagesDir: 'src/pages',
      //   extensions: ['vue']
      // }),

      //我的文件夹是 views，所以需要配置
      // Pages({
      //   dirs: [{ dir: 'src/views', baseRoute: '' }],
      //   importMode: 'async',
      // }),
      // Layouts({
      //   // 如果是默认 layouts文件夹，默认 default.vue文件，则不需要配置
      //   layoutsDirs: 'src/layouts',
      //   defaultLayout: 'default'
      // }),
      AutoImport({
        // 目标文件
        include: [
          /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
          /\.vue$/,
          /\.vue\?vue/, // .vue
          /\.md$/ // .md
        ],
        resolvers: [
          ArcoResolver(),
          //自动导入图标组件
          IconsResolver({
            prefix: 'Icon',

            // 自定义的icon模块集合
            customCollections: ['user', 'home']
          })
        ],
        //全局自动导入插件'vue', 'pinia', 'vue-router', '@vueuse/core'等
        imports: [
          'vue',
          'pinia',
          // 'vue-router',
          {
            'vue-router': [
              'useLink',
              'useRoute',
              'useRouter',
              'onBeforeRouteLeave',
              'onBeforeRouteUpdate',
              'createRouter',
              'createWebHashHistory',
              'createWebHistory'
            ]
          },

          {
            '@vueuse/core': [
              // named imports
              'useMouse', // import { useMouse } from '@vueuse/core',
              'useTitle',
              // alias
              ['useFetch', 'useMyFetch'] // import { useFetch as useMyFetch } from '@vueuse/core',
            ],
            axios: [
              // default imports
              ['default', 'axios'] // import { default as axios } from 'axios',
            ]
          }
        ],
        // eslint报错解决
        eslintrc: {
          // 这里先设置成true然后npm run dev 运行之后会生成 .eslintrc-auto-import.json 文件之后，在改为false
          enabled: true, // Default `false`
          filepath: `./.eslintrc-auto-import.json`, // Default `./.eslintrc-auto-import.json`
          globalsPropValue: true // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
        }
        // 声明文件生成位置和文件名称
        // dts: './auto-imports.d.js'
      }),
      Components({
        // imports 指定组件所在位置，默认为 src/components
        dirs: ['src/components/', 'src/views/', 'src/layout'],
        extensions: ['vue', 'md'],
        deep: true,
        // dts: './auto-components.d.js',
        directoryAsNamespace: false,
        globalNamespaces: [],
        directives: true,
        include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
        exclude: [
          /[\\/]node_modules[\\/]/,
          /[\\/]\.git[\\/]/,
          /[\\/]\.nuxt[\\/]/
        ],
        resolvers: [
          //自动导入Element Plus组件
          ArcoResolver({
            sideEffect: true
          }),
          // icon组件自动引入解析器使用
          IconsResolver({
            // icon自动引入的组件前缀 - 为了统一组件icon组件名称格式
            prefix: 'icon',
            // 自定义的icon模块集合
            customCollections: ['user', 'home']
          }),
          VueUseComponentsResolver(),
          VueUseDirectiveResolver()
        ]
      }),
      Icons({
        compiler: 'vue3',
        customCollections: {
          // user图标集，给svg文件设置 fill="currentColor" 属性，使图标的颜色具有适应性
          user: FileSystemIconLoader('src/assets/svg/user', svg =>
            svg.replace(/^<svg /, '<svg fill="currentColor" ')
          ),
          // home 模块图标集
          home: FileSystemIconLoader('src/assets/svg/home', svg =>
            svg.replace(/^<svg /, '<svg fill="currentColor" ')
          )
        },
        autoInstall: true
      }),
      // 新增一个 Unocss 插件配置
      Unocss({
        // 预设
        presets: [presetUno(), presetAttributify()],
        // 指令转换插件
        transformers: [transformerDirective()],
        // 自定义规则
        rules: []
      }),
      //@arco-plugins/vite-vue 插件会自动加载组件样式。
      vitePluginForArco({
        style: 'css'
      })
    ],
    server: {
      host: '0.0.0.0',
      port: 8080,
      open: false,
      // 端口占用直接退出
      strictPort: true,
      proxy: {
        '/api': {
          target: baseUrl,
          changeOrigin: true,
          ws: true,
          rewrite: path => path.replace(/^\/api/, '')
        }
      }
    },
    //这里进行配置别名
    build: {
      outDir: 'dist',
      assetsDir: 'static/assets',
      // sourcemap: true,
      // 规定触发警告的 chunk 大小，消除打包大小超过500kb警告
      chunkSizeWarningLimit: 2000,
      // 静态资源打包到dist下的不同目录
      rollupOptions: {
        output: {
          chunkFileNames: 'static/js/[name]-[hash].js',
          entryFileNames: 'static/js/[name]-[hash].js',
          assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
          manualChunks: {
            vue: ['vue', 'pinia', 'vue-router']
          }
        }
      }
    },

    resolve: {
      extensions: ['.js', '.vue', '.json'], //加入extensions，为了之后引入的时候不用写后缀
      alias: {
        '@': resolve('./src'), // @代替src
        '@u': resolve('./src/utils'),
        '@a': resolve('./src/api'),
        '@c': resolve('./src/components'),
        '#': resolve('./types') // #代替types
      }
    },

    //Vite 本身支持 Less语法 ，用户只需在配置文件中传入Less的配置即可：
    css: {
      preprocessorOptions: {
        less: {
          modifyVars: {
            'arcoblue-6': '#f85959'
          },
          javascriptEnabled: true
        }
      }
    }
  })
}
